<!--
 * @Author: 赵京涛 z19472333952022@163.com
 * @Date: 2024-07-27 20:52:08
 * @LastEditors: 赵京涛 z19472333952022@163.com
 * @LastEditTime: 2024-07-27 21:38:20
 * @projectName: data_analysis_web
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="w-100 h-100">
    <el-table :data="tableData" height="calc(100%)" border v-if='tableData.length > 0'>
      <el-table-column align="center" width="80px" label="序号">
        <template v-slot:default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <template v-for="(item, index) in tableHeader">
        <!-- 重写Id -->
        <el-table-column v-if="item.label === 'ID'" :key="index" align="center" width="80px" :label="item.label" :fixed="item.fixed">
          <template v-slot:default="scope">
            {{ scope.row["id"] }}
          </template>
        </el-table-column>
        <!-- 重写点位类型 -->
        <el-table-column v-else-if="item.label === '点位类型'" :key="index + 'dwlx'" align="center" width="130px" :label="item.label" :fixed="item.fixed">
          <template v-slot:default="scope">
            {{ scope.row["dwlx"] }}
          </template>
        </el-table-column>
        <!-- 重写序号 -->
        <el-table-column v-else-if="item.label === '序号'" :key="index + 'xh'" align="center" :width="item.width" :label="item.label" :fixed="item.fixed">
          <template v-slot:default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <!-- 针对于简单行表头数据 -->
        <el-table-column v-else-if="!item.rowspan && !isShowThreeColumn" :key="index + item.key" align="center" :width="item.width" :prop="item.key"
          :label="item.label">
          <template v-slot:default="scope">
            <span>{{ scope.row[item.key] }}</span>
          </template>
        </el-table-column>
        <!-- 针对于item.label并且是复杂表头（二级表头）的情况 -->
        <el-table-column v-else-if="item.rowspan && item.label !== ''" :key="item.key + '_index'" :label="item.label"
          :width="item.key === 'data_name' ? '150px' : (item.key === 'jcrq' || item.key === 'qy_xbzs' || item.key === 'jcsd' || item.key === 'jczw' || item.key === 'xbzs' ? '160px' : item.key === 'exceedance_factor' || item.key === 'wzzs' ? '110px' : item.key === 'czwzxbsl' || item.key === 'ccjzmd' || item.key === 'ccjzndbs' ? '200px': '')"
          align="center" :prop="item.key" :fixed="item.fixedColumn === 'left' || item.fixedColumn === 'right' ? item.fixedColumn : false">
          <template v-slot:default="scope">
            <span style="width: 100%; height: 100%; display: block"
              :style="{ backgroundColor: scope.row[`${item.key}_CellColor`] ? scope.row[`${item.key}_CellColor`] : 'inherit', color: scope.row[`${item.key}_CellColor`] ? 'white' : 'black'}">{{ scope.row[item.key] }}</span>
          </template>
        </el-table-column>
        <!-- 针对于一级统计分析列表（二级表头） -->
        <el-table-column v-else-if="item.columnName !== '' && item.category !== '' && item.columnName !== item.category && !isShowThreeColumn"
          :key="item.key + item.key + '_index'" align="center" :label="item.columnName">
          <template v-if="!item.list">
            <el-table-column :key="item.key" align="center" :prop="item.key" :label="item.category"
              :width="item.key === 'czwzxbsl' || item.key === 'ccjzmd' || item.key === 'ccjzndbs' ? '300px' : ''">
              <template v-slot:default="scope">
                <span style="width: 100%; height: 100%; display: block"
                  :style="{ backgroundColor: scope.row[`${item.key}_CellColor`] ? scope.row[`${item.key}_CellColor`] : 'inherit', color: scope.row[`${item.key}_CellColor`] ? 'white' : 'black'}">{{ scope.row[item.key] }}</span>
              </template>
            </el-table-column>
          </template>
          <!-- 单日极值 累计极值 -->
          <template v-if="item.list">
            <el-table-column v-for="itemList in item.list" :key="itemList.key" align="center" :prop="itemList.key" :label="itemList.category"
              :width="itemList.category === '超出基准浓度倍数（倍）' || itemList.category === '赤潮基准密度（cells/L）' || itemList.category === '平均细胞密度（cells/L）' || itemList.category === '最大值点位' || itemList.category === '最小值点位' || itemList.category === '中位数点位' ? '200px' : itemList.key === 'czwzxbsl' || itemList.key === 'ccjzmd' ? '220px' : ''">
              <template v-slot:default="scope">
                <span style="width: 100%; height: 100%; display: block"
                  :style="{ backgroundColor: scope.row[`${itemList.key}_CellColor`] ? scope.row[`${itemList.key}_CellColor`] : 'inherit', color: scope.row[`${itemList.key}_CellColor`] ? 'white' : 'black'}">{{ scope.row[itemList.key] }}</span>
              </template>
            </el-table-column>
          </template>
        </el-table-column>
        <!-- 针对于数据统计 => 三级表头 -->
        <el-table-column v-if="item.columnName !== '' && item.category !== '' && item.columnName !== item.category && isShowThreeColumn" :key="item.columnName"
          align="center" :label="item.columnName">
          <template v-if="item.list">
            <el-table-column v-for="itemList in item.list" :key="itemList.category" align="center" :label="itemList.category" width="150px"
              :sortable="itemList.list.length <= 1 ? 'custom' : false" :prop="itemList.list.length <= 1 ? itemList.list[0].key : undefined">
              <template v-if="itemList.list.length > 1">
                <el-table-column v-for="itemThree in itemList.list" :key="itemThree.key" align="center"
                  :width="itemThree.headerThirdRow === '点位' || itemThree.headerThirdRow === '监测值' ? '220px' : ''" :prop="itemThree.key"
                  :label="itemThree.headerThirdRow" :sortable="'custom'">
                  <template v-slot:default="scope">
                    <span style="width: 100%; height: 100%; display: block" :style="{
                          backgroundColor: scope.row[`${itemThree.key}_CellColor`]
                            ? scope.row[`${itemThree.key}_CellColor`]
                            : 'inherit',
                          color: scope.row[`${itemThree.key}_CellColor`] ? 'white' : 'black',
                        }">{{ scope.row[itemThree.key] }}</span>
                  </template>
                </el-table-column>
              </template>
              <template v-slot:default="scope">
                <span style="width: 100%; height: 100%; display: block"
                  :style="{ backgroundColor: scope.row[`${itemList.list[0].key}_CellColor`] ? scope.row[`${itemList.list[0].key}_CellColor`] : 'inherit', color: scope.row[`${itemList.list[0].key}_CellColor`] ? 'white' : 'black' }">
                  {{ scope.row[itemList.list[0].key] }}
                </span>
              </template>
            </el-table-column>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-empty v-else class='h-100' :image-size="200" />
  </div>
</template>
<script>
export default {
  id: 'renderDialogTable',
  props: {
    // 弹窗状态
    isShow: {
      type: Boolean,
      default: () => false
    },
    // 是否显示三级表头
    isShowThreeColumn: {
      type: Boolean,
      default: () => false
    },
    // 表头
    tableHeader: {
      type: Array,
      default: () => []
    },
    // 列表数据
    tableData: {
      type: Array,
      default: () => []
    }
  }
}
</script>